/**
 * @file 首页
 * @date 2025/10/24 12:46:27
 * @author lyqjob@yeah.net
 */

import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { DatePicker, TimePicker, Pagination, message, Space, Card, Row, Col, Carousel, Badge, List, Avatar, Tag, Button, Divider } from 'antd';
import { UserOutlined, ClockCircleOutlined, CheckCircleOutlined, FileTextOutlined, CloseCircleOutlined,
    ExclamationCircleOutlined, BellOutlined, MessageOutlined, SettingOutlined, SafetyOutlined,
    TeamOutlined, DollarOutlined, ShoppingCartOutlined, AlertOutlined, SyncOutlined,
    NotificationOutlined, AuditOutlined, CalendarOutlined, MailOutlined, BarChartOutlined,
    UserAddOutlined, DatabaseOutlined, FileSearchOutlined, UploadOutlined, DownloadOutlined,
    LayoutOutlined, TableOutlined, UnorderedListOutlined, FormOutlined } from '@ant-design/icons';
import styles from './index.less'
import img2 from '@/static/images/2.png'
import ScheduleCalendar from '@/components/ScheduleCalendar';

const Home = () => {
    const userInfo = useSelector(state => state.global.userInfo);
    const [dailyQuote, setDailyQuote] = useState();
    const navigate = useNavigate();

    // 通知公告示例数据
    const [notifications] = useState([
        {
            id: 1,
            title: '系统升级通知',
            content: '系统将于本周六凌晨2点进行升级维护，预计持续2小时',
            type: 'system',
            time: '2024-01-15 10:30',
            priority: 'high',
            read: false
        },
        {
            id: 2,
            title: '春节放假安排',
            content: '根据国家法定假期安排，公司春节放假时间为2月8日至2月17日',
            type: 'holiday',
            time: '2024-01-14 15:20',
            priority: 'medium',
            read: false
        },
        {
            id: 3,
            title: '新功能上线通知',
            content: '审批流程优化功能已上线，支持批量审批和自动流转',
            type: 'feature',
            time: '2024-01-13 09:15',
            priority: 'low',
            read: true
        },
        {
            id: 4,
            title: '安全提醒',
            content: '请定期更换密码，确保账户安全',
            type: 'security',
            time: '2024-01-12 16:45',
            priority: 'medium',
            read: true
        }
    ]);

    // 审批流程示例数据
    const [approvals] = useState([
        {
            id: 1,
            title: '张三的请假申请',
            applicant: '张三',
            type: 'leave',
            content: '因个人原因申请年假3天，时间：1月20日-1月22日',
            status: 'pending',
            time: '2024-01-15 14:20',
            priority: 'urgent'
        },
        {
            id: 2,
            title: '采购申请-办公设备',
            applicant: '李四',
            type: 'purchase',
            content: '申请采购笔记本电脑5台，预算共计25000元',
            status: 'pending',
            time: '2024-01-15 11:30',
            priority: 'high'
        },
        {
            id: 3,
            title: '报销申请-差旅费',
            applicant: '王五',
            type: 'reimbursement',
            content: '北京出差费用报销，总计3580元',
            status: 'approved',
            time: '2024-01-14 16:45',
            priority: 'medium'
        },
        {
            id: 4,
            title: '入职申请-技术部',
            applicant: 'HR部门',
            type: 'employment',
            content: '前端开发工程师入职申请，薪资面议',
            status: 'rejected',
            time: '2024-01-14 10:20',
            priority: 'low'
        }
    ]);

    const onCarouselChange = currentSlide => {
        console.log(currentSlide);
    };

    const contentStyle = {
        height: '240px',
        color: '#fff',
        lineHeight: '240px',
        textAlign: 'center',
        borderRadius: '8px',
        fontSize: '18px',
        fontWeight: 'bold'
    };

    const carouselStyles = [
        {
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        },
        {
            background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        },
        {
            background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
        },
        {
            background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
        }
    ];

    const onPanelChange = (value, mode) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };

    // 获取通知类型图标
    const getNotificationIcon = (type) => {
        const iconMap = {
            system: <NotificationOutlined style={{ color: '#1890ff' }} />,
            holiday: <BellOutlined style={{ color: '#52c41a' }} />,
            feature: <MessageOutlined style={{ color: '#722ed1' }} />,
            security: <SafetyOutlined style={{ color: '#ff4d4f' }} />
        };
        return iconMap[type] || <BellOutlined />;
    };

    // 获取优先级标签
    const getPriorityTag = (priority) => {
        const tagMap = {
            high: { color: 'red', text: '重要' },
            medium: { color: 'orange', text: '普通' },
            low: { color: 'blue', text: '一般' },
            urgent: { color: 'magenta', text: '紧急' }
        };
        const tag = tagMap[priority] || tagMap.medium;
        return <Tag color={tag.color}>{tag.text}</Tag>;
    };

    // 获取审批状态标签
    const getStatusTag = (status) => {
        const statusMap = {
            pending: { color: 'processing', text: '待审批' },
            approved: { color: 'success', text: '已通过' },
            rejected: { color: 'error', text: '已驳回' }
        };
        const statusInfo = statusMap[status] || statusMap.pending;
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
    };

    // 获取审批类型图标
    const getApprovalIcon = (type) => {
        const iconMap = {
            leave: <ClockCircleOutlined style={{ color: '#1890ff' }} />,
            purchase: <ShoppingCartOutlined style={{ color: '#52c41a' }} />,
            reimbursement: <DollarOutlined style={{ color: '#fa8c16' }} />,
            employment: <TeamOutlined style={{ color: '#722ed1' }} />
        };
        return iconMap[type] || <FileTextOutlined />;
    };

    const MenuItems = [
        // 核心审批流程
        {
            label: '待审批',
            key: 'todo',
            number: 10,
            icon: <ClockCircleOutlined />,
            color: '#faad14'
        },
        {
            label: '已审批',
            number: 8,
            key: 'approved',
            icon: <CheckCircleOutlined />,
            color: '#52c41a'
        },
        {
            label: '已驳回',
            number: 2,
            key: 'rejected',
            icon: <CloseCircleOutlined />,
            color: '#ff4d4f'
        },

        // 申请跟踪
        {
            label: '我的申请',
            number: 5,
            key: 'my-applications',
            icon: <FileTextOutlined />,
            color: '#1890ff'
        },

        // 安全与异常
        {
            label: '安全预警',
            number: 1,
            key: 'security-alert',
            icon: <SafetyOutlined />,
            color: '#ff4d4f'
        },
        {
            label: '待处理异常',
            number: 4,
            key: 'pending-exception',
            icon: <ExclamationCircleOutlined />,
            color: '#fa8c16'
        }
    ];

    useEffect(() => {
        message.info('首页数据为模拟数据');
        // 获取每日一句
        getDailyQuote();
    }, []);

    // 获取每日一句
    const getDailyQuote = async () => {
        try {
           
            const res = await fetch('https://cn.apihz.cn/api/yiyan/api.php?id=10010074&key=0ed4566f49215a4f15e820abdb17ee58');
            const data = await res.json();
            if (data?.code === 200) {
                
                setDailyQuote(data?.msg||'');
                return
            }
            message.error('随机一言获取失败');
        } catch (error) {
            message.error('随机一言获取失败');
        }
    };


    return (
        <div className={styles.container}>
            <Row gutter={16} style={{ width: '100%', height: '100%' }}>
                {/* 左侧区域 */}
                <Col span={14} >
                    <Card title={'欢迎回来，' + userInfo?.name} style={{ marginBottom: 16 }}>
                        <p style={{fontSize: '14px', fontWeight: '500', marginBottom: '4px', lineHeight: '1.2',color: '#7f7f7f'}}>{dailyQuote||''}</p>
                    </Card>
                    <Card title="待办事项" style={{ marginBottom: 16 }}>
                        <Row gutter={[16, 0]}>
                            {MenuItems.map((item) => (
                                <Col span={4} key={item.key}>
                                    <div
                                        style={{
                                            padding: '12px',
                                            border: '1px solid #f0f0f0',
                                            borderRadius: '8px',
                                            textAlign: 'center',
                                            cursor: 'pointer',
                                            transition: 'all 0.3s',
                                            backgroundColor: '#fff',
                                            height: '100px',
                                            display: 'flex',
                                            flexDirection: 'column',
                                            justifyContent: 'center'
                                        }}
                                        onMouseEnter={(e) => {
                                            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
                                            e.currentTarget.style.transform = 'translateY(-2px)';
                                        }}
                                        onMouseLeave={(e) => {
                                            e.currentTarget.style.boxShadow = 'none';
                                            e.currentTarget.style.transform = 'translateY(0)';
                                        }}
                                    >
                                        <div style={{ fontSize: '20px', color: item.color, marginBottom: '6px' }}>
                                            {item.icon}
                                        </div>
                                        <div style={{ fontSize: '14px', fontWeight: '500', marginBottom: '4px', lineHeight: '1.2' }}>
                                            {item.label}
                                        </div>
                                        <Badge count={item.number} style={{ backgroundColor: item.color }} />
                                    </div>
                                </Col>
                            ))}
                        </Row>
                    </Card>
                    
                    <Card title="通知公告" extra={<a href="#">更多</a>} style={{ marginBottom: 16 }}>
                        <List
                            dataSource={notifications}
                            renderItem={(item) => (
                                <List.Item
                                    style={{
                                        padding: '12px 0',
                                        borderBottom: '1px solid #f0f0f0',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => console.log('点击通知:', item.title)}
                                >
                                    <List.Item.Meta
                                        avatar={getNotificationIcon(item.type)}
                                        title={
                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                                <span style={{
                                                    fontWeight: !item.read ? '600' : 'normal',
                                                    color: !item.read ? '#1890ff' : 'inherit'
                                                }}>
                                                    {item.title}
                                                </span>
                                                {!item.read && <Badge dot />}
                                                {getPriorityTag(item.priority)}
                                            </div>
                                        }
                                        description={
                                            <div>
                                                <div style={{
                                                    fontSize: '12px',
                                                    color: '#666',
                                                    marginBottom: '4px',
                                                    lineHeight: '1.4'
                                                }}>
                                                    {item.content}
                                                </div>
                                                <div style={{ fontSize: '11px', color: '#999' }}>
                                                    {item.time}
                                                </div>
                                            </div>
                                        }
                                    />
                                </List.Item>
                            )}
                        />
                    </Card>
                    <Card title="审批流程" extra={<a href="#">更多</a>}>
                        <List
                            dataSource={approvals}
                            renderItem={(item) => (
                                <List.Item
                                    style={{
                                        padding: '12px 0',
                                        borderBottom: '1px solid #f0f0f0',
                                        cursor: 'pointer'
                                    }}
                                    actions={[
                                        item.status === 'pending' ? (
                                            <div style={{ display: 'flex', gap: '8px' }}>
                                                <Button
                                                    size="small"
                                                    type="primary"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        console.log('通过审批:', item.title);
                                                    }}
                                                >
                                                    通过
                                                </Button>
                                                <Button
                                                    size="small"
                                                    danger
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        console.log('驳回审批:', item.title);
                                                    }}
                                                >
                                                    驳回
                                                </Button>
                                            </div>
                                        ) : null
                                    ].filter(Boolean)}
                                    onClick={() => console.log('点击审批:', item.title)}
                                >
                                    <List.Item.Meta
                                        avatar={getApprovalIcon(item.type)}
                                        title={
                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                                <span>{item.title}</span>
                                                {getStatusTag(item.status)}
                                                {getPriorityTag(item.priority)}
                                            </div>
                                        }
                                        description={
                                            <div>
                                                <div style={{
                                                    fontSize: '12px',
                                                    color: '#666',
                                                    marginBottom: '4px',
                                                    lineHeight: '1.4'
                                                }}>
                                                    {item.content}
                                                </div>
                                                <div style={{ fontSize: '11px', color: '#999' }}>
                                                    申请人：{item.applicant} · {item.time}
                                                </div>
                                            </div>
                                        }
                                    />
                                </List.Item>
                            )}
                        />
                    </Card>
                </Col>

                {/* 右侧区域 */}
                <Col span={10}>
                    {/* 首页轮播 */}
                    <Carousel
                        autoPlay
                        afterChange={onCarouselChange}
                        arrows
                        autoplaySpeed={3000}
                        style={{ marginBottom: 16 }}>
                        <div>
                            <img src={img2} alt="" style={{ width: '100%', height: 'auto' }} />
                        </div>
                        <div>
                            <img src={img2} alt="" style={{ width: '100%', height: 'auto' }} />
                        </div>
                        <div>
                            <img src={img2} alt="" style={{ width: '100%', height: 'auto' }} />
                        </div>
                        <div>
                            <img src={img2} alt="" style={{ width: '100%', height: 'auto' }} />
                        </div>
                    </Carousel>
                    <Card title="快捷方式" style={{ marginBottom: 16 }}>
                        <Row gutter={[24, 24]}>
                            {
                                [
                                    { icon: <SettingOutlined />, text: '系统设置', route: '/setting/auth', color: '#1890ff' },
                                    { icon: <UserOutlined />, text: '用户管理', route: '/setting/user', color: '#52c41a' },
                                    { icon: <TeamOutlined />, text: '部门管理', route: '/setting/department', color: '#faad14' },
                                    { icon: <FileTextOutlined />, text: '权限管理', route: '/setting/permission', color: '#722ed1' },
                                    { icon: <DatabaseOutlined />, text: '角色管理', route: '/setting/role', color: '#eb2f96' },
                                    { icon: <AlertOutlined />, text: '监控中心', route: '/monitor/error', color: '#ff7875' }
                                ].map((item, index) => (
                                    <Col span={8} key={index}>
                                        <Button
                                            type="primary"
                                            icon={item.icon}
                                            onClick={() => navigate(item.route)}
                                            style={{
                                                width: '100%',
                                                height: '60px',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                                padding: '16px',
                                                backgroundColor: '#fff',
                                                borderColor: item.color,
                                                color: item.color,
                                                borderRadius: '12px',
                                                fontSize: '16px',
                                                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                                                transition: 'all 0.3s ease'
                                            }}
                                            hoverable
                                        >
                                            {/* <div style={{ marginBottom: '12px', fontSize: '32px', color: item.color }}>{item.icon}</div> */}
                                            <div style={{ fontSize: '16px', fontWeight: '600' }}>{item.text}</div>
                                        </Button>
                                    </Col>
                                ))
                            }
                        </Row>
                    </Card>
                    {/* 首页日程表 */}
                    <ScheduleCalendar />
                </Col>
            </Row>
        </div>
    )
}

export default Home;